<template>
	<view class='cu-modal bottom-modal' :class='{show: show}'>
		<view class='model'>
			<view class='title'>
				选择添加类型
				<text class='close cuIcon-close' @click='handleClose'></text>
			</view>
			
			<view class='list'>
				<view class='list-item' v-for='item in list' :key='item.type' @click='handleAdd(item)'>
					<image class='icon' src='/static/icon/archive2.png'></image>
					<view class='name'>{{item.name}}</view>
					<text class='right-icon cuIcon-right'></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util'
	export default {
		data() {
			return {
				show: false,
				list: [{
					name: '基础档案',
					type: '1'
				},{
					name: '成长档案',
					type: '2'
				}]
			}
		},
		methods: {
			handleOpen() {
				this.show = true
			},
			handleClose() {
				this.show = false;
			},
			handleAdd(e) {
				this.handleClose()
				util.navigateTo({
					url: '/pagesPet/pages/archives/add/index?type=' + e.type + '&cargoId=' + uni.getStorageSync('pet_cargoId')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.model {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 40rpx 148rpx 40rpx;
		background: #FEF8ED;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		text-align: left;
		
		.title {
			padding: 64rpx 0;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--h1Color);
			line-height: 45rpx;
			text-align: center;
			position: relative;
			
			.close {
				font-size: 40rpx;
				position: absolute;
				top: 32rpx;
				right: 0;
			}
		}
		
		
		.list {
			
			.list-item {
				width: 100%;
				height: 144rpx;
				background: #FFFFFF;
				border-radius: 76rpx;
				display: flex;
				align-items: center;
				padding: 0 48rpx 0 56rpx;
				margin-bottom: 28rpx;
				
				&:last-child {
					margin: 0;
				}
				
				.icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 16rpx;
				}
				
				.name {
					font-weight: 500;
					font-size: 32rpx;
					color: var(--h1Color);
				}
				
				.right-icon {
					margin-left: auto;
				}
			}
		}
		
	}
</style>